<template>
  <div>
    <Modal
      :value="modalState"
      :title="title"
      :loading="loading"
      ok-text="确认添加"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="40%">
      <div style="margin-left: 200px">
        <!-- <Row style="margin-bottom: 15px">
          <Col span='7'>版页类型：</Col>
          <Col span='8'>{{confirmData.type === '0' ? '口碑结算' : ''}}</Col>
        </Row> -->
        <Row style="margin-bottom: 15px">
          <Col span='7'>姓名：</Col>
          <Col span='8'>{{row.uname}}</Col>
        </Row>
        <Row v-if="row.state === '0'" style="margin-bottom: 15px">
          <Col span='7'>性别：</Col>
          <Col span='8'>{{confirmData.sex === '0' ? '女' : confirmData.sex === '1' ? '男' : '-'}}</Col>
        </Row>
        <Row v-if="row.state === '0'" style="margin-bottom: 15px">
          <Col span='7'>接待销售：</Col>
          <Col span='8'>{{nameList.filter(item => item.id.toString() === confirmData.puid)[0] ? nameList.filter(item => item.id.toString() === confirmData.puid)[0].uname : '-'}}</Col>
        </Row>
        <Row v-if="row.state === '0'" style="margin-bottom: 15px">
          <Col span='7'>客户意向度：</Col>
          <Col span='8'>{{confirmData.want === '3' ? '意向度很强烈' : confirmData.want === '2' ? '意向度较强' : confirmData.want === '1' ? '意向度一般' : confirmData.want === '0' ? '意向度不强' : '-'}}</Col>
        </Row>
        <Row v-if="row.state === '1'" style="margin-bottom: 15px">
          <Col span='7'>年龄段：</Col>
          <Col span='8'>{{confirmData.age === '1' ? '0~18' : confirmData.age === '2' ? '19~25' : confirmData.age === '3' ? '26~30' : confirmData.age === '4' ? '31~40' : row.age === '5' ? '36~40' : confirmData.age === '6' ? '41~45' : confirmData.age === '7' ? '46~50' : confirmData.age === '8' ? '51~55' : confirmData.age === '9' ? '56~60' : confirmData.age === '0' ? '60以上' : '-'}}</Col>
        </Row>
        <Row v-if="row.state === '0'" style="margin-bottom: 15px">
          <Col span='7'>意向商品：</Col>
          <Col span='8'>{{confirmData.gname}}</Col>
        </Row>
        <Row v-if="row.state === '0'" style="margin-bottom: 15px">
          <Col span='7'>预约时间：</Col>
          <Col span='8'>{{confirmData.appointime ? confirmData.appointime : '-'}}</Col>
        </Row>
        <Row v-if="row.state === '1' || row.state === '3'" style="margin-bottom: 15px">
          <Col span='7'>到店时间：</Col>
          <!-- <Col span='8'>{{row.comdate ? this.$moment(row.comdate).format('YYYY-MM-DD') : this.$moment(new Date()).format('YYYY-MM-DD')}}</Col> -->
          <Col span='8'>{{this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}}</Col>
        </Row>
        <Row v-if="row.state === '3' && row.tname === ''" style="margin-bottom: 15px">
          <Col span='7'>意向商品：</Col>
          <Col span='8'>{{confirmData.tname}}</Col>
        </Row>
        <Row v-if="row.state === '3' && row.tname !== '' && (row.ttype === '2' || row.ttype === '1' || row.ttype === '3')" style="margin-bottom: 15px">
          <Col span='7'>签约商品：</Col>
          <Col span='8'>{{confirmData.gname}}</Col>
        </Row>
        <Row v-if="row.state === '3' && row.tname !== '' && (row.ttype === '2' || row.ttype === '1' || row.ttype === '3')" style="margin-bottom: 15px">
          <Col span='7'>签约金额：</Col>
          <Col span='8'>{{confirmData.cprice}}</Col>
        </Row>
        <Row v-if="row.state === '3' && row.tname !== '' &&  row.ttype === '2'" style="margin-bottom: 15px">
          <Col span='7'>云销售金额：</Col>
          <Col span='8'>{{confirmData.commission}}</Col>
        </Row>
        <!-- <Row v-if="row.state === '3' && row.tname !== '' &&  row.ttype === '1'" style="margin-bottom: 15px">
          <Col span='7'>云销售金额：</Col>
          <Col span='8'>{{confirmData.commission}}</Col>
        </Row> -->
        <Row v-if="row.state === '2'" style="margin-bottom: 15px">
          <Col span='7'>新预约时间：</Col>
          <Col span='8'>{{confirmData.appointime}}</Col>
        </Row>
        <Row v-if="row.state === '1' && row.ttype === '1'" style="margin-bottom: 15px">
          <Col span='7'>云销售积分：</Col>
          <Col span='8'>{{row.permoney}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>备注：</Col>
          <Col span='8'>{{confirmData.remarks}}</Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'CustomerConfirmModal',
  props: {
    confirmData: {},
    confirmTitle: '',
    row: null
  },
  mounted () {
    // console.log(this.confirmData)
  },
  data () {
    return {
      title: '',
      loading: true
    }
  },
  updated () {
    if (this.confirmTitle === '客户管理意向客户' || (this.confirmTitle === '客户管理预约客户' && this.row.state === '2')) {
      this.title = '确认预约时间'
    }
    if (this.confirmTitle === '客户管理预约客户' && this.row.state === '1') {
      this.title = '确认到店时间'
    }
    if (this.confirmTitle === '客户管理到店客户' && this.row.tname === '' && this.row.state === '3') {
      this.title = '确认意向商品'
    } else if (this.confirmTitle === '客户管理到店客户' && this.row.tname !== '' && this.row.state === '3') {
      this.title = '签约内容'
    }
  },
  computed: {
    ...mapState({
      nameList: state => state.arrive.nameList,
      taskList: state => state.taskList.taskList,
      // row: state => state.taskList.row,
      modalState: state => state.modal.customerConfirmState
    })
  },
  methods: {
    ...mapActions(['updateCustomerConfirmState', 'updateCustomerDrawerState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$emit('customer-confirm-valid')
    },
    cancel () {
      this.updateCustomerConfirmState(false)
      this.updateCustomerDrawerState(true)
    }
  }
}
</script>
